<template>
    <template v-for="menu in userMenu">
        <!-- :index属性的值 是菜单点击时需要跳转的路由地址 -->
        <el-sub-menu v-if="menu.children && menu.children.length>0" :index="menu.path">
            <!--插槽  el-sub-menu标签定义时留了个位置(插槽)  显示菜单的名字和图标 -->
            <template #title>
                <el-icon v-slot="icon">
                    <component :is="menu.icon" />
                </el-icon>
                {{menu.name}}
            </template>
            <!--递归调用 如果菜单有子菜单时递归调用当前的菜单组件 -->
            <tree-menu :userMenu="menu.children" />
        </el-sub-menu>
        <el-menu-item v-else-if="menu.hide===false" :index="menu.path">
            <el-icon v-slot="icon">
                <component :is="menu.icon" />
            </el-icon>
            {{menu.name}}
        </el-menu-item>
    </template>
</template>
<script setup>
    defineProps({ //使用defineProps接受父组件传递过来的参数
        userMenu: {
            type: Array, //类型是数组
            default: () => [] //默认值是一个空数组
        }
    })
</script>